
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/>
    <link rel="stylesheet" href="main.css" />
</head>

<body>
<div id="app">
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header">
                <h2>Router Basic - 06</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <a class="list-group-item" v-link="{ path: '/home', activeClass: 'active'}">Home</a>
                <a class="list-group-item" v-link="{ path: '/about', activeClass: 'active'}">About</a>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="well">
                {{{ msg }}}
            </div>
        </div>
    </div>
</div>

<template id="home">
    <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
    </div>
    <div>
        <ul class="nav nav-tabs">
            <li :class="path == '/home/news' ? 'active': ''">
                <a v-link="{ path: '/home/news'}">News</a>
            </li>
            <li :class="path == '/home/message' ? 'active': ''">
                <a v-link="{ path: '/home/message'}">Messages</a>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
    </div>
</template>

<template id="news">
    <div>
        <ul>
            <li>News 01</li>
            <li>News 02</li>
            <li>News 03</li>
        </ul>
    </div>
</template>
<template id="message">
    <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
    </ul>
</template>
<pre>
全局钩子函数
全局钩子函数有2个：

beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入激活阶段时被调用
组件的钩子函数
组件的钩子函数一共6个：

data：可以设置组件的data
activate：激活组件
deactivate：禁用组件
canActivate：组件是否可以被激活
canDeactivate：组件是否可以被禁用
canReuse：组件是否可以被重用
切换对象
每个切换钩子函数都会接受一个 transition 对象作为参数。这个切换对象包含以下函数和方法：

transition.to
表示将要切换到的路径的路由对象。
transition.from
代表当前路径的路由对象。
transition.next()
调用此函数处理切换过程的下一步。
transition.abort([reason])
调用此函数来终止或者拒绝此次切换。
transition.redirect(path)
取消当前切换并重定向到另一个路由。
钩子函数的执行顺序
全局钩子函数和组件钩子函数加起来一共8个，为了熟练vue router的使用，有必要了解这些钩子函数的执行顺序。
</pre>
</body>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    var well = new Vue({
        el: '.well',
        data: {
            msg: '',
            color: '#ff0000'
        },
        methods: {
            setColor: function(){
                this.color = '#' + parseInt(Math.random()*256).toString(16)
                        + parseInt(Math.random()*256).toString(16)
                        + parseInt(Math.random()*256).toString(16)
            },
            setColoredMessage: function(msg){
                this.msg +=  '<p style="color: ' + this.color + '">' + msg + '</p>'
            },
            setTitle: function(title){
                this.msg =  '<h2 style="color: #333">' + title + '</h2>'
            }
        }
    })

    function RouteHelper(name) {
        var route = {
            canReuse: function(transition) {
                well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
                return true
            },
            canActivate: function(transition) {
                well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
                transition.next()
            },
            activate: function(transition) {
                well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
                transition.next()
            },
            canDeactivate: function(transition) {
                well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
                transition.next()
            },
            deactivate: function(transition) {
                well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
                transition.next()
            },
            data: function(transition) {
                well.setColoredMessage('执行组件' + name + '的钩子函数:data')
                transition.next()
            }
        }
        return route;
    }

    var Home = Vue.extend({
        template: '#home',
        data: function() {
            return {
                msg: 'Hello, vue router!',
                path: ''
            }
        },
        route: RouteHelper('Home')
    })

    var News = Vue.extend({
        template: '#news',
        route: RouteHelper('News')
    })

    var Message = Vue.extend({
        template: '#message',
        route: RouteHelper('Message')
    })

    var About = Vue.extend({
        template: '#about',
        route: RouteHelper('About')
    })

    var router = new VueRouter()
    router.redirect({
        '/': '/home'
    })
    router.map({
        '/home': {
            component: Home,
            subRoutes: {
                '/news': {
                    component: News
                },
                '/message': {
                    component: Message
                }
            }
        },
        '/about': {
            component: About
        }
    })

    router.beforeEach(function(transition) {
        well.setColor()
        well.setTitle('跳转路径<span class="text-danger">[from = ' + transition.from.path + '], [to = ' + transition.to.path + ']</span>')
        well.setColoredMessage('执行router的全局函数:beforeEach')
        transition.next()
    })

    router.afterEach(function(transition) {
        well.setColoredMessage('执行router的全局函数:afterEach')
    })

    var App = Vue.extend({})
    router.start(App, '#app')
</script>

</html>